import React, { Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'

export default class Search extends Component {




    search = ()=>{
        const {keywordElement:{value:data}} = this
        // 进入等待状态
        PubSub.publish('List',{loading:true,isFirst:false});
        axios.get(`http://localhost:3000/api1/search/users?q=${data}`).then(response=>{
            console.log('请求成功',response.data);
            const {items} = response.data;
            const userList = items.map((userObj)=>{
                return {id:userObj.id,avator:userObj.avatar_url,name:userObj.login,home:userObj.html_url}
            })
            PubSub.publish('List',{userList:userList,loading:false})
        },error=>{
            console.log(error);
            // 这里需要注意，error回调函数返回的是error对象，不能直接传入
            PubSub.publish('List',{loading:false,error:error.message})
        })
    }

    render() {
        return (
            <div>
                <section className="jumbotron">
                    <h3 className="jumbotron-heading">Search Github Users</h3>
                    <div>
                        <input ref={c => this.keywordElement=c } type="text" placeholder="enter the name you search" />&nbsp;
                        <button onClick={this.search}>Search</button>
                    </div>
                </section>
            </div>
        )
    }
}
